<template>
	<div style="display: flex;justify-content: center;flex-direction: column;">
		<el-form label-width="100px">

			<el-form-item v-for="(value,index,key) in PaperQuestion" :key="index" :label="value.type+':'">
				<el-form-item style="display: flex;justify-content: flex-start;">
					<el-button type="success" @click="addQuestionTo(value.id)">添加题目</el-button>
				</el-form-item>
				<el-form-item v-for="(valu,index,key) in value.questions" style="display: flex;justify-content: flex-start;margin-bottom: 10px;">
					<el-button style="width: 500px;" disabled>{{valu.title}}</el-button>
					<el-input-number v-model="valu.score"
					 placeholder="分数" style="margin-left: 10px;margin-right: 10px;"></el-input-number>
					<el-button type="primary" icon="el-icon-delete" @click="deleteQ(valu.id,value.type)"></el-button>
					
				</el-form-item>
			</el-form-item>
		</el-form>
		<div style="display: flex;justify-content: center;">
			<el-button type="primary" @click="submitForm">保存</el-button>
			<el-button type="danger" @click="cancelSubmit">取消</el-button>
		</div>

		<el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" style="width: 100%;height: 100%"
		 :show-close="false" center>
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="题干" prop="title">
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<el-button @click="Selection()">提交</el-button>
				<el-button @click="toggleSelection()">取消选择</el-button>
			</div>


		</el-dialog>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				whatOpen:'',
				multipleSelection: [],
				dialogVisible: false,
				tableData: [{
						id: '1',
						title: '树上有几个鸟',
						score:''
					},
					{
						id: '2',
						title: '树上有几个鸡',
						score:''
					}
				],
				PaperQuestion: [
					{

						id:'1',
						type: '单选题',
						questions: [{
								id: '1',
								title: '山上有几头猪',
								score:''
							},
							{
								id: '2',
								title: '山上有几头狗',
								score:''
							}
						]
					},
					{
						id:'2',
						type: '单选题',
						questions: [{
								id: '1',
								title: '山上有几头猪',
								score:''
							},
							{
								id: '2',
								title: '山上有几头狗',
								score:''
							}
						]
					},
					{
						id:'3',
						type: '单选题',
						questions: [{
								id: '1',
								title: '山上有几头猪',
								score:''
							},
							{
								id: '2',
								title: '山上有几头狗',
								score:''
							}
						]
					}
				]
			}
		},
		methods: {
			handleSelectionChange(val) {
				console.log(val)
				this.multipleSelection = val;
			},
			Selection() {
				let flag=-1;
				for (let value in this.$data.PaperQuestion) {
					flag++;
					if(this.$data.PaperQuestion[value].id==this.$data.whatOpen){
						break;
					}
				}
				for(let value in this.$data.multipleSelection){
					this.$data.PaperQuestion[flag].questions.push(this.$data.multipleSelection[value])
				}
				console.log(flag)
				this.$refs.multipleTable.clearSelection();
				this.$data.whatOpen='';
				this.$data.dialogVisible = false;
			},
			toggleSelection(rows) {
				console.log(rows)
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			submitForm() {

				this.$router.push({
					path: '/paper/list'
				})
			},
			cancelSubmit() {

				this.$router.push({
					path: '/paper/list'
				})
			},
			addQuestionTo(qtype) {



				this.$data.whatOpen=qtype;
				this.$data.dialogVisible = true;
			},
			deleteQ(qtype, type) {

				console.log(qtype + '-------' + type)
			}

		}



	}
</script>

<style>
</style>
